<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>杨沛鑫作品</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="bgBox">
        <!-- 导航栏 -->
        <div class="leftBox">
            <img class="lognImg" src="images/sampre.png" alt="">
            <ul class="navList">
                <li><a href="#oPin">平面作品</a></li>
                <li><a href="#oPone">移动端项目</a></li>
                <li><a href="#oWeb">web端项目</a></li>
                <li><a href="#oDou">企业抖音运营剪辑</a></li>
                <li><a href="#oJianjie">个人简介</a></li>

            </ul>
        </div>
        <!-- 内容区域 -->
        <div class="rightBox">
            <div class="swiper-container banBox">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/banner/banner1.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/banner/banner2.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/banner/banner3.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/banner/banner4.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/banner/banner5.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/banner/banner6.png" alt=""></div>
                    <div class="swiper-slide"><img src="images/banner/banner7.png" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 平面作品 -->
            <div class="magnifyBox" style="display:none">
                <img class="closeBtn" src="images/close.png" alt="">
                <img class="leftBtn" src="images/left2.png" alt="">
                <img class="rightBtn" src="images/right2.png" alt="">
                <img class="changeImg" src="images/plan/pran1.jpg" alt="">
            </div>
            <div class="title" id="oPin">
                <h3>平面作品/海报~易拉宝(单击可放大)</h3>
            </div>
            <div class="planBox">


                <div class="imgBox manBox">
                    <img src="images/plan/pran1.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran2.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran3.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran4.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran5.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran6.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran7.jpg" alt="">
                </div>
                <div class="imgBox">
                    <img src="images/plan/pran8.jpg" alt="">
                </div>
                <div class="imgBox">
                    <img src="images/plan/pran9.jpg" alt="">
                </div>
                <div class="imgBox">
                    <img src="images/plan/pran10.jpg" alt="">
                </div>
                <div class="imgBox">
                    <img src="images/plan/pran11.jpg" alt="">
                </div>

                <div class="imgBox">
                    <img src="images/plan/pran12.jpg" alt="">
                </div>
                <div class="imgBox">
                    <img src="images/plan/pran13.jpg" alt="">
                </div>
                <div class="imgBox">
                    <img src="images/plan/pran14.jpg" alt="">
                </div>
            </div>
            <div class="title" id="oPone">
                <h3>移动端项目</h3>
            </div>
            <!-- 移动端项目 -->
            <div class="webAppBox">
                <div class="introduce">
                    <p>坚果小铺app是一款坚果类电商购物app，主要针对学生白领等坚果爱好者。针对广大学生白领对坚果的喜爱，出售低价优质的坚果类零食。</p>
                    <div class="infoBox">
                        <div class="oneBox">
                            <div class="swiper-container iPhoneSister">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="images/rat/rat0.png" alt=""></div>
                                    <div class="swiper-slide"><img src="images/rat/rat1.png" alt=""></div>
                                    <div class="swiper-slide"><img src="images/rat/rat2.png" alt=""></div>
                                    <div class="swiper-slide"><img src="images/rat/rat3.png" alt=""></div>
                                    <div class="swiper-slide"><img src="images/rat/rat4.png" alt=""></div>
                                    <div class="swiper-slide"><img src="images/rat/rat5.png" alt=""></div>
                                </div>
                            </div>
                        </div>
                        <div class="imBox">
                            <img class="iconi" src="images/rat/rat6.png" alt="">
                            <img class="erwei" src="images/rat/erweima.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="introduce">
                    <p>邻家小妹app是一款主要从事原产地团购、海外代购、名牌直购、同城配送为一体得综合性电商的平台。</p>
                    <div class="infoBox">
                        <div class="oneBox">
                            <div class="swiper-container iPhoneSister">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="images/sister/sister1.jpg" alt=""></div>
                                    <div class="swiper-slide"><img src="images/sister/sister2.jpg" alt=""></div>
                                    <div class="swiper-slide"><img src="images/sister/sister3.jpg" alt=""></div>
                                    <div class="swiper-slide"><img src="images/sister/sister4.jpg" alt=""></div>
                                    <div class="swiper-slide"><img src="images/sister/sister5.jpg" alt=""></div>
                                </div>
                            </div>
                        </div>
                        <div class="imBox">
                        	<img src="images/sister/sister6.png" alt="" />
                            <img src="images/rat/erweima.png" alt="">
                        </div>
                    </div>

                </div>
            </div>
            <div class="title" id="oWeb">
                <h3>web端项目</h3>
            </div>
            <!-- web端项目 -->
            <div class="webBox">
                <div class="leBox">
                    <p><img class="msimg" src="images/web/ms.png" alt=""></p>
                    <h3><a href="http://meishi.brilliantme.top/"target="_blank">进入官网 >> </a></h3>
                </div>
                <div class="leBox">
                    <p><img class="jjimg" src="images/web/zhuanti.jpg" alt=""></p>
                    <h3><a href="#">进入官网 >> </a></h3>
                </div>
                <div class="leBox">
                    <p><img class="jjimg" src="images/web/jj.png" alt=""></p>
                    <h3><a href="http://jiaju.brilliantme.top/"target="_blank">进入官网 >> </a></h3>
                </div>
            </div>
            <div class="title" id="oDou">
                <h3>企业抖音运营剪辑</h3>
            </div>
            <!-- 企业抖音运营剪辑 -->
            <div class="webBox">
                <div class="leBox">
                    <p><img class="msimg" src="images/dou.png" alt=""></p>
                </div>
                <div class="leBox">
                    <p><img class="jjimg" src="images/dou1.png" alt=""></p>
                </div>
            </div>
            <div class="title" id="oJianjie">
                <h3>个人简介</h3>
            </div>
            <!-- 个人简介 -->
            <div class="individual">
                <img src="images/geren.jpg" alt="">
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/swiper.min.js"></script>
<script>
    var mySwiper = new Swiper('.banBox', {
        effect: 'fade',
        loop: true, // 循环模式选项
        autoplay: 2000,
        pagination: ".swiper-pagination",
    })
    var mySwiper = new Swiper('.iPhoneSister', {
        effect: "flip",
        loop: true, // 循环模式选项
    })
</script>

</html>
